import React, { Component, } from 'react';
import {
  Modal,
  Text,
  TouchableHighlight,
  View,
  StyleSheet,
  Image,
} from 'react-native';

const Dimensions = require('Dimensions');

const SCREEN_WIDTH = Dimensions.get('window').width;// 宽
const SCREEN_HEIGHT = Dimensions.get('window').height;// 高


export default class ModalDialog extends Component {
  // 构造
  constructor(props) {
    super(props);
  }

     static defaultProps = {
       _dialogTitle: '温馨提示',
       _dialogContent: '确定退出登陆吗?',
       _dialogLeftBtnTitle: '取消',
       _dialogRightBtnTitle: '确定',
       _dialogVisible: false,
     }

     render() {
       // onPress事件直接与父组件传递进来的属性挂接
       const uri = 'http://120.48.109.211:8088/static/icon/warming.png';
       return (
         <Modal
           visible={this.props._dialogVisible}
           transparent
           onRequestClose={() => {}}
         >
           <View style={styles.bg}>
             <View style={styles.dialog}>
               <View style={styles.dialogTitleView}>
                 <Image resizeMode="contain" style={styles.dialogIcon} source={{ uri, }} />
               </View>
               <View style={styles.dialogContentView}>
                 <Text style={styles.dialogContent}>
                   {this.props._dialogContent}
                 </Text>
               </View>

               <View style={styles.dialogLine} />
               <View style={styles.dialogBtnView}>
                 <TouchableHighlight style={styles.dialogBtnViewItem} onPress={this.props._dialogLeftBtnAction}>
                   <Text style={styles.leftButton}>
                     {this.props._dialogLeftBtnTitle}
                   </Text>
                 </TouchableHighlight>
                 <View style={styles.dialogBtnLine} />
                 <TouchableHighlight style={styles.dialogBtnViewItem} onPress={this.props._dialogRightBtnAction}>
                   <Text style={styles.rightButton}>
                     {this.props._dialogRightBtnTitle}
                   </Text>
                 </TouchableHighlight>
               </View>

             </View>
           </View>
         </Modal>
       );
     }
}

const styles = StyleSheet.create({
  bg: { // 全屏显示 半透明 可以看到之前的控件但是不能操作了
    width: SCREEN_WIDTH,
    height: SCREEN_HEIGHT,
    backgroundColor: 'rgba(52,52,52,0.5)', // rgba  a0-1  其余都是16进制数
    justifyContent: 'center',
    alignItems: 'center',
  },
  dialog: {
    width: SCREEN_WIDTH * 0.8,
    height: SCREEN_HEIGHT * 0.28,
    backgroundColor: 'white',
    borderRadius: 8,
  },
  dialogTitleView: {
    width: SCREEN_WIDTH * 0.8,
    height: SCREEN_HEIGHT * 0.08,
    alignContent: 'center',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFFFFF',
    borderTopLeftRadius: 8,
    borderTopRightRadius: 8,
  },
  dialogIcon: {
    width: 50,
    height: 50,
    marginTop: 30,
  },
  dialogContentView: {
    width: SCREEN_WIDTH * 0.8,
    height: SCREEN_HEIGHT * 0.12,
    justifyContent: 'center',
    alignItems: 'center',
  },
  dialogContent: {
    textAlign: 'center',
    fontSize: 16,
    color: '#4A4A4A',
  },
  dialogBtnView: {
    width: SCREEN_WIDTH * 0.8,
    height: SCREEN_HEIGHT * 0.08,
    flexDirection: 'row',
  },
  dialogBtnViewItem: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    //  backgroundColor: '#FFFFFF',
    borderBottomLeftRadius: 8,
    borderBottomRightRadius: 8,
  },
  leftButton: {
    fontSize: 18,
    color: '#007AFF',
  },
  rightButton: {
    fontSize: 18,
    color: '#007AFF',
  },
  dialogLine: {
    height: 0.8,
    backgroundColor: '#E5E5E5',
  },
  dialogBtnLine: {
    width: 0.8,
    backgroundColor: '#E5E5E5',
  },
});
